<template>
  <div id="product_choose_film">
    <zm-panel title="添加影院" :visible.sync="value" @change="close">
      <zm-form :model="searchForm" inline class="mt20" ref="searchForm">
        <zm-form-item prop="cinemaName">
          <zm-input
            class="w200"
            v-model="searchForm.cinemaName"
            placeholder="请输入影院名称搜索"
          />
        </zm-form-item>
        <zm-form-item prop="cinemaCode">
          <zm-input
            class="w200"
            v-model="searchForm.cinemaCode"
            placeholder="请输入影院编码搜索"
          />
        </zm-form-item>
        <zm-form-item prop="interfaceId">
          <zm-data-select
            v-model="searchForm.interfaceId"
            :list="interfaceList"
            class="w200"
            clearable
            placeholder="系统商分组"
            multiple
            str
          >
          </zm-data-select>
        </zm-form-item>
        <zm-form-item prop="cinemaLineId">
          <zm-data-select
            v-model="searchForm.cinemaLineId"
            :list="cinemaLineList"
            class="w200"
            clearable
            placeholder="院线"
            multiple
            str
          >
          </zm-data-select>
        </zm-form-item>
        <zm-form-item prop="region">
          <el-cascader
            v-model="searchForm.region"
            :options="options"
            clearable
            collapse-tags
            :show-all-levels="false"
            :props="{ multiple: true,label:'name',value:'id' }"
            filterable
            @change="clearRegion"
          ></el-cascader>
        </zm-form-item>
        <zm-form-item>
          <zm-button @click="handleSearch" t="search"></zm-button>
          <zm-button @click="handleReset" t="reset"></zm-button>
        </zm-form-item>
      </zm-form>
      <zm-table-data
        ref="zm-table"
        :data="tableParams.data"
        :columns="chooseFilmColumns"
        :fetch="loadList"
        :table-params="tableParams"
        :show-page="true"
        pk="id"
        @selection-change="getSelectionIds"
      >
      </zm-table-data>

      <div slot="footer" class="tr">
        <zm-button @click="close" type="info">取消</zm-button>
        <zm-button @click="save" type="primary">确认</zm-button>
      </div>
    </zm-panel>
  </div>
</template>
<script>
import panelMixin from '@/mixins/panelMixin'
import tableMixin from '@/mixins/zmTableMixin'
import cloudApis from '@/api/src/cloud'
import { chooseFilmColumns } from '../../const'
export default {
  name: 'ChooseFilm',
  components: {},
  mixins: [panelMixin, tableMixin],
  props: {
    currentId: {
      type: String,
      default: ''
    },
    selectedArr: {
      type: Array,
      default: () => {}
    },
    selected: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      radio: '',
      searchForm: {
        cinemaName: '', // 影院名称
        cinemaCode: '', // 影院编码
        interfaceId: '', // 系统商id
        cinemaLineId: '', // 院线id
        provinceId: '', // 省份id
        cityId: '', // 城市id
        countyId: '', // 区县id
        region: ''
      },
      interfaceList: [], // 系统商下拉
      cinemaLineList: [], // 院线下拉
      options: [],
      innerChecked: [],
      loading: false
    }
  },
  computed: {
    chooseFilmColumns () {
      return chooseFilmColumns(this)
    }
  },
  watch: {},
  created () {
    this.init()
  },
  methods: {
    init () {
      this.getCinemaGroupListByType()
      this.getAllRegion()
      if (this.selected) {
        this.radio = this.selected
      }
    },
    // 获取地区数据
    async getAllRegion () {
      const _res = await cloudApis.getAllRegion()
      this.options = _res.list
    },
    // 获取系统商、影院下拉
    async getCinemaGroupListByType () {
      this.interfaceList = await cloudApis.getCinemaGroupListByType({type: 'interface'})
      this.cinemaLineList = await cloudApis.getCinemaGroupListByType({type: 'line'})
    },
    save () {
      if (!!this.radio === false) {
        this.$message.warning('请选择方案')
        return
      } else {
        this.$emit('handle-after', this.radio)
        this.close()
      }
    },
    /* initialTableData (dataList, totalCount) {
      const tableParams = this.tableParams
      tableParams.total = totalCount || 0
      tableParams.data = dataList || []
    }, */
    async loadList () {
      const _res = await cloudApis.getCinemaPageList(this.assignQuery(this.searchForm))
      const list = _res.list.map(item => {
        const isChecked = this.selected === item.id
        return {
          ...item,
          isChecked
        }
      })
      console.log(list, '555')
      this.initialTableData(list, _res.count)
    },
    handleChange (row) {

    },
    // 清空已选地区ID
    clearRegion () {
      let _obj = {
        provinceId: '',
        cityId: '',
        countyId: ''
      }
      Object.assign(this.searchForm, _obj)
    },
    // 查询
    handleSearch () {
      // 特殊处理所选地区数据
      const regionArr = this.searchForm.region
      if (regionArr.length > 0) {
        // 省份
        const provinceIdList = regionArr.map(i => i[0])
        const provinceId = Array.from(new Set(provinceIdList)).join(',')
        // 城市
        const cityIdList = regionArr.map(i => i[1])
        const cityId = Array.from(new Set(cityIdList)).join(',')
        // 区县
        const countyIdList = regionArr.map(i => i[2])
        const countyId = countyIdList.join(',')
        let _obj = {
          provinceId,
          cityId,
          countyId
        }
        Object.assign(this.searchForm, _obj)
      }
      this.onSearch()
    },
    handleReset () {
      this.clearRegion()
      this.onReset()
    }
  }
}
</script>
<style scoped lang='scss'>
</style>
